<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form
        :inline="true"
        :model="menuForm"
        class="demo-form-inline"
        style="display: flex"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menuForm.menuName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="状态" prop="menuState">
          <el-select v-model="menuForm.menuState" placeholder="状态">
            <el-option label="正常" :value="1" />
            <el-option label="停用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reast">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="menuAdd(1)">新增</el-button>
      </div>

      <el-table
        :tree-props="{ children: 'children' }"
        row-key="_id"
        ref="multipleTableRef"
        :data="menuList"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column lable="操作" min-width="160">
          <template #default="scope">
            <el-button type="primary" @click="menuEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="menuAdd(2, scope.row)"
              >新增</el-button
            >
            <el-button type="success" @click="menuDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="showMadol" title="新增菜单">
      <el-form :model="menuForm" ref="dialogForm" :rules="rules">
        <el-form-item label="父级菜单" prop="parentId">
          <el-cascader
            v-model="menuForm.parentId"
            :options="menuList"
            :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
            clearable
          />
          <span>不选，默认形成一级菜单</span>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="menuForm.menuType">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menuForm.menuName" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="icon"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="路由地址"
          prop="path"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.path" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          style="width: 100%"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.component" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="菜单状态"
          prop="menuState"
          v-show="menuForm.menuType === 1"
        >
          <el-radio-group v-model="menuForm.menuState">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group></el-form-item
        >
        <el-form-item
          label="权限标识"
          prop="menuCode"
          v-show="menuForm.menuType === 2"
        >
          <el-input v-model="menuForm.menuCode" autocomplete="off"
        /></el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import api from './../api'
import { ref, reactive, toRaw, nextTick } from 'vue'
import utils from '../utils/utils.js'
// 定义表单的正则规则
const rules = reactive({
  menuName: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 10,
      message: "长度在2-8个字符",
      trigger: "blur",
    },
  ],
})
// 定义获取表单节点
const dialogForm = ref(null)
// 定义菜单form对象
const form = reactive({})
// 定义菜单列表
const menuList = ref([])
// 定义菜单列表请求参数，，也可以作为初始化的表单
let menuForm = reactive({
  parentId: [null],
  menuType: 1,
  menuState: 1,
})
// 菜单请求方法
const getMenuList = async () => {
  let res = await api.getMenuList(menuForm)
  console.log(res);
  menuList.value = res
}
getMenuList()
// 定义记录用户行为
const action = ref('add')
// 定义弹窗变量
const showMadol = ref(false)
// 定义弹窗方法
const menuAdd = (type, row) => {
  action.value = 'add'
  showMadol.value = !showMadol.value
  if (type == 2) {
    //点击的是快捷方式的新增按钮
    // 把id放到parentId数组中即可
    console.log(row);
    menuForm.parentId = [...row.parentId, row._id].filter((ele) => ele);
  }
}
// 定义编辑弹窗方法
const menuEdit = (row) => {
  action.value = 'edit'
  showMadol.value = !showMadol.value
  nextTick(() => {
    Object.assign(menuForm, row)
  })
  getMenuList()

}
// 定义删除方法
const menuDel = async (row) => {
  action.value = 'delete'
  console.log(row._id);
  let data = { _id: row._id, action: action.value }
  let res = await api.getMenuOperate(data)
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
  getMenuList()
}
//定义动态列表
const columns = reactive([
  {
    label: "菜单名称",
    prop: "menuName",
    // width: 150
  },
  {
    label: "图标",
    prop: "icon",
  },
  {
    label: "菜单类型",
    prop: "menuType",
    formatter (row, column, value) {
      return {
        1: "菜单",
        2: "按钮",
      }[value];
    },
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "组件路径",
    prop: "component",
  },
  {
    label: "菜单状态",
    prop: "menuState",
    formatter (row, column, value) {
      return {
        1: "正常",
        2: "停用",
      }[value];
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);

// 表单重置方法
const resetForm = () => {
  dialogForm.value.resetFields()
}

// 定义提交按钮方法
const handleSubmit = () => {
  dialogForm.value.validate(async (vaild) => {
    if (vaild) {
      // 发送提交请求
      // 获取menuFrom + action 发送请求（menuOperate）
      console.log(menuForm);
      let data = toRaw(menuForm)
      console.log(data);
      data.action = action.value
      let res = await api.getMenuOperate(data)
      // 重置表单
      resetForm()
      // 关闭弹窗
      showMadol.value = !showMadol.value
      // 重新请求menuList，渲染数据
      getMenuList()
    }
  })
}

const handleCancel = () => {

}


// 定义查询
const onSubmit = () => {
  console.log(menuForm);
  getMenuList()
}

// 定义重置
const reast = () => {
  menuForm.menuName = ''
  menuForm.menuState = ''
  getMenuList()

}

</script>

<style lang="scss" scoped>
</style>